<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>


    <!-- 1. Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <%= javascript_include_tag "highcharts" %>
    <!--[if IE]>
			<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
		<![endif]-->


    <!-- 2. Add the JavaScript to initialize the chart on document ready -->
    <script type="text/javascript">
      $(document).ready(function() {
        var chart = new Highcharts.Chart({
          chart: {
            renderTo: 'container',
            margin: [50, 200, 60, 170]
          },
          title: {
            text: 'Browser market shares at a specific website, 2008'
          },
          plotArea: {
            shadow: null,
            borderWidth: null,
            backgroundColor: null
          },
          tooltip: {
            formatter: function() {
              return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              dataLabels: {
                enabled: true,
                formatter: function() {
                  if (this.y > 5) return this.point.name;
                },
                color: 'white',
                style: {
                  font: '13px Trebuchet MS, Verdana, sans-serif'
                }
              }
            }
          },
          legend: {
            layout: 'vertical',
            style: {
              left: 'auto',
              bottom: 'auto',
              right: '50px',
              top: '100px'
            }
          },
          series: [{
              type: 'pie',
              name: 'Browser share',
              data: [
                ['Firefox',   44.2],
                ['IE7',       26.6],
                ['Chrome',    3.1],
                ['Safari',    2.7],
                ['Opera',     2.3],
                ['Firefox',   0.4]
              ]
              /*{
                  name: 'IE6',
                  y: 20,
                  sliced: true,
                  selected: true
                }*/
              //data: [3.40, 1.05, 2.90, 1.65, 1.35, 2.59, 1.39, 3.07, 2.82]
            }]
        });


      });
    </script>

  </head>
  <body>

    <!-- 3. Add the container -->
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
    <%= "This is document" %>
    <%=  params[:docid]  %><br/>
    
    <% if @annotations.nil? %>
      <%= "There are no data in records" %>
    <%else%>
      <% @annotations.each do |annotation| %>
      <%= annotation.id %> | <%= annotation.document_id %> | <%= annotation.points_array %><br/>
    <% end %>   
    <% end %>

  </body>
</html>
